const colors0 = ["#9440FF", "#F95555", "#5288F3", "#FF6BF5", "#FCBF87"];
const colors1 = ["#C395FF", "#EA877A", "#184FBC", "#992691", "#C76F1E"];
export const mixins = {
  data() {
    return {
      sexAnalysisChart: null,
      ageRatioChart: null,
      quantityTrendChart: null,
      ireatmentChart: null,
      identityTypeChart: null,
    };
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    if (this.sexAnalysisChart) {
      this.sexAnalysisChart.dispose(); // 清理图表实例
    }
    if (this.ageRatioChart) {
      this.ageRatioChart.dispose(); // 清理图表实例
    }
    if (this.quantityTrendChart) {
      this.quantityTrendChart.dispose(); // 清理图表实例
    }
    if (this.ireatmentChart) {
      this.ireatmentChart.dispose(); // 清理图表实例
    }
    if (this.identityTypeChart) {
      this.identityTypeChart.dispose(); // 清理图表实例
    }
  },
  methods: {
    // 年龄占比
    // setAgeRatio(obj, DomId) {
    //   this.ageRatioChart = this.$echarts.init(document.getElementById(DomId));
    //   let data = [];
    //   obj.xdata.forEach((item, index) => {
    //     data.push({
    //       value: obj.ydata[index],
    //       name: item,
    //       itemStyle: {
    //         color: {
    //           type: "linear",
    //           x: 0,
    //           y: 0,
    //           x2: 0,
    //           y2: 1,
    //           colorStops: [
    //             {
    //               offset: 0,
    //               color: colors0[index], // 0% 处的颜色
    //             },
    //             {
    //               offset: 1,
    //               color: colors1[index], // 100% 处的颜色
    //             },
    //           ],
    //           global: false, // 缺省为 false
    //         },
    //       },
    //     });
    //   });
    //   this.ageRatioChart.option = {
    //     tooltip: {
    //       trigger: "item",
    //     },
    //     title: {
    //       text: "年龄结构",
    //       textStyle: {
    //         fontSize: 14,
    //         color: "#fff",
    //         fontFamily: "SourceHanSansCN",
    //       },
    //     },
    //     legend: {
    //       orient: "vertical",
    //       top: "25%",
    //       right: "right",
    //       itemWidth: 6,
    //       itemHeight: 6,
    //       icon: "circle",
    //       textStyle: {
    //         color: "#fff",
    //       },
    //     },
    //     series: [
    //       {
    //         type: "pie",
    //         radius: [15, 50],
    //         center: ["45%", "60%"],
    //         roseType: "area",
    //         itemStyle: {
    //           borderRadius: 8,
    //         },
    //         data,
    //         label: {
    //           show: false,
    //         },
    //         labelLine: {
    //           show: false,
    //         },
    //         top: "8%",
    //         left: "-30%",
    //       },
    //     ],
    //     grid: {
    //       left: 0,
    //       right: 0,
    //       bottom: 0,
    //       top: 0,
    //       containLabel: true,
    //     },
    //   };
    //   this.ageRatioChart.setOption(this.ageRatioChart.option);
    //   window.addEventListener("resize", this.handleResize);
    // },
    // 重点管理人员数量趋势
    setQuantityTrend(obj, DomId) {
      this.quantityTrendChart = this.$echarts.init(
        document.getElementById(DomId)
      );
      this.quantityTrendChart.option = {
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: obj.xdata,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(235, 235, 235, 0.1)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: obj.ydata,
            type: "line",
            // 设置折线颜色
            lineStyle: {
              color: "#EBAF78",
              width: 1,
              type: "solid",
            },
            // 设置折点颜色
            itemStyle: {
              color: "#EBAF78",
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(235, 175, 120, 0.6)", // 70% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(235, 175, 120, 0)", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        ],
        grid: {
          left: 5,
          right: 15,
          bottom: 5,
          top: 10,
          containLabel: true,
        },
      };
      this.quantityTrendChart.setOption(this.quantityTrendChart.option);
      window.addEventListener("resize", this.handleResize);
    },
    // 补贴待遇
    setTreatment(obj, DomId) {
      this.ireatmentChart = this.$echarts.init(document.getElementById(DomId));
      this.ireatmentChart.option = {
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: obj.xdata,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(235, 235, 235, 0.1)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
        },
        series: [
          {
            data: obj.ydata,
            type: "bar",
            barWidth: 10, // 柱子宽度
            itemStyle: {
              color: {
                type: "linear",
                x: 1, //右
                y: 0, //下
                x2: 0, //左
                y2: 0, //上
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(193, 120, 235, 1)", // 70% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(193, 120, 235, 0)", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        ],
        grid: {
          left: 5,
          right: 15,
          bottom: 5,
          top: 10,
          containLabel: true,
        },
      };
      this.ireatmentChart.setOption(this.ireatmentChart.option);
      window.addEventListener("resize", this.handleResize);
    },
    // 人员分类研判
    setPersonType(obj, DomId) {
      this.alarmTypeChart = this.$echarts.init(document.getElementById(DomId));
      let data = [];
      obj.xdata.forEach((item, index) => {
        data.push({
          value: obj.ydata[index],
          name: item,
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: colors0[index] },
              { offset: 1, color: colors1[index] },
            ]),
          },
        });
      });
      this.alarmTypeChart.option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          top: "center",
          right: "15%",
          itemWidth: 6,
          itemHeight: 6,
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
          formatter: function (name) {
            let value;
            data.forEach((item) => {
              if (item.name == name) {
                value = item.value;
              }
            });
            return name + " " + value + " 人";
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["40%", "65%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              // color: function (params) {
              //   return colors[params.dataIndex % colors.length];
              // },
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            left: "-25%",
            data,
          },
        ],
      };
      this.alarmTypeChart.setOption(this.alarmTypeChart.option);
      window.addEventListener("resize", this.handleResize);
    },
    // 跑道数量通报
    setIdentityType(obj, DomId) {
      this.identityTypeChart = this.$echarts.init(
        document.getElementById(DomId)
      );
      this.identityTypeChart.option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          orient: "horizontal",
          right: "10",
          itemWidth: 6,
          itemHeight: 6,
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: obj.xdata,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(235, 235, 235, 0.1)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
        },
        yAxis: {
          type: "value",
          minInterval: 1,
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: obj.ydata[0].name,
            // stack: "Total",
            data: obj.ydata[0].data,
            type: "line",
            // 设置折线颜色
            lineStyle: {
              color: obj.ydata[0].color,
              width: 1,
              type: "solid",
            },
            // 设置折点颜色
            itemStyle: {
              color: obj.ydata[0].color,
            },
          },
          {
            name: obj.ydata[1].name,
            // stack: "Total",
            data: obj.ydata[1].data,
            type: "line",
            // 设置折线颜色
            lineStyle: {
              color: obj.ydata[1].color,
              width: 1,
              type: "solid",
            },
            // 设置折点颜色
            itemStyle: {
              color: obj.ydata[1].color,
            },
          },
        ],
        grid: {
          left: 10,
          right: 25,
          bottom: 5,
          top: 20,
          containLabel: true,
        },
      };
      this.identityTypeChart.setOption(this.identityTypeChart.option);
      window.addEventListener("resize", this.handleResize);
    },
  },
};
